<template>
  <div>
    <el-table
      border
      style="width: 100%"
      :data="table_data"
      v-loading="loading_table"
      element-loading-text="加载中"
    >
      <el-table-column
        v-if="this.table_config.checkbox"
        type="selection"
        width="55"
      >
      </el-table-column>
      <template v-for="item in this.table_config.thead">
        <!--回调-->
        <el-table-column
          v-if="item.type === 'function'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <span
              v-html="item.callback && item.callback(scope, item.prop)"
            ></span>
          </template>
        </el-table-column>
        <!--具名插槽-->
        <el-table-column
          v-else-if="item.type === 'slot'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <slot :name="item.slotName" :data="scope.row"></slot>
          </template>
        </el-table-column>

        <el-table-column
          v-else
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
        >
        </el-table-column>
      </template>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getTableList } from "@/request/common";
import { messageFun } from "@/utils/element";
export default {
  props: {
    config: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      table_config: {
        thead: [],
        checkbox: true,
        url: "",
        data: {
          pageSize: 10,
          pageNumber: 1,
        },
      },
      table_data: [],
      loading_table: false,
      total: 0,
      currentPage4: 1,
    };
  },
  methods: {
    initConfig() {
      for (const key in this.config) {
        if (Object.keys(this.table_config).includes(key)) {
          this.table_config[key] = this.config[key];
        }
      }
      this.loadTableData();
    },

    async loadTableData() {
      const requestData = {
        url: this.table_config.url,
        data: this.table_config.data,
      };
      this.loading_table = true;
      const { data } = await getTableList(requestData);
      if (data && data.resCode === 0) {
        this.table_data = data.data.data;
        this.total = data.data.total;
        this.loading_table = false;
        console.log(this.table_data);
      } else {
        // console.log(data);
        // messageFun(data.message);
        this.loading_table = false;
      }
    },
    requestData(params) {
      let req = JSON.stringify(params);
      if (req != "{}") {
        this.table_config.data = params;
        this.initConfig();
      }
    },
    handleSizeChange(v) {
      this.table_config.data.pageSize = v;
      this.loadTableData();
    },
    handleCurrentChange(v) {
      this.table_config.data.pageNumber = v;
      this.loadTableData();
    },
  },
  watch: {
    config: {
      handler(newValue) {
        this.initConfig();
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.block {
  margin-top: 30px;
  text-align: right;
}
</style>